<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="UTF-8">
    <title>移动到某一个节点后，高亮所有相邻的节点和边</title></head>
  
  <body>
    <div id="mountNode"></div>
    <script src="../build/g6.js"></script>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script>const data = {
        nodes: [{
          id: "Myriel"
        },
        {
          id: "Napoleon"
        },
        {
          id: "Mlle.Baptistine"
        },
        {
          id: "Mme.Magloire"
        },
        {
          id: "CountessdeLo"
        },
        {
          id: "Geborand"
        },
        {
          id: "Champtercier"
        },
        {
          id: "Cravatte"
        },
        {
          id: "Count"
        },
        {
          id: "OldMan"
        },
        {
          id: "Labarre"
        },
        {
          id: "Valjean"
        },
        {
          id: "Marguerite"
        },
        {
          id: "Mme.deR"
        },
        {
          id: "Isabeau"
        },
        {
          id: "Gervais"
        },
        {
          id: "Tholomyes"
        },
        {
          id: "Listolier"
        },
        {
          id: "Fameuil"
        },
        {
          id: "Blacheville"
        },
        {
          id: "Favourite"
        },
        {
          id: "Dahlia"
        },
        {
          id: "Zephine"
        },
        {
          id: "Fantine"
        },
        {
          id: "Mme.Thenardier"
        },
        {
          id: "Thenardier"
        },
        {
          id: "Cosette"
        },
        {
          id: "Javert"
        },
        {
          id: "Fauchelevent"
        },
        {
          id: "Bamatabois"
        },
        {
          id: "Perpetue"
        },
        {
          id: "Simplice"
        },
        {
          id: "Scaufflaire"
        },
        {
          id: "Woman1"
        },
        {
          id: "Judge"
        },
        {
          id: "Champmathieu"
        },
        {
          id: "Brevet"
        },
        {
          id: "Chenildieu"
        },
        {
          id: "Cochepaille"
        },
        {
          id: "Pontmercy"
        },
        {
          id: "Boulatruelle"
        },
        {
          id: "Eponine"
        },
        {
          id: "Anzelma"
        },
        {
          id: "Woman2"
        },
        {
          id: "MotherInnocent"
        },
        {
          id: "Gribier"
        },
        {
          id: "Jondrette"
        },
        {
          id: "Mme.Burgon"
        },
        {
          id: "Gavroche"
        },
        {
          id: "Gillenormand"
        },
        {
          id: "Magnon"
        },
        {
          id: "Mlle.Gillenormand"
        },
        {
          id: "Mme.Pontmercy"
        },
        {
          id: "Mlle.Vaubois"
        },
        {
          id: "Lt.Gillenormand"
        },
        {
          id: "Marius"
        },
        {
          id: "BaronessT"
        },
        {
          id: "Mabeuf"
        },
        {
          id: "Enjolras"
        },
        {
          id: "Combeferre"
        },
        {
          id: "Prouvaire"
        },
        {
          id: "Feuilly"
        },
        {
          id: "Courfeyrac"
        },
        {
          id: "Bahorel"
        },
        {
          id: "Bossuet"
        },
        {
          id: "Joly"
        },
        {
          id: "Grantaire"
        },
        {
          id: "MotherPlutarch"
        },
        {
          id: "Gueulemer"
        },
        {
          id: "Babet"
        },
        {
          id: "Claquesous"
        },
        {
          id: "Montparnasse"
        },
        {
          id: "Toussaint"
        },
        {
          id: "Child1"
        },
        {
          id: "Child2"
        },
        {
          id: "Brujon"
        },
        {
          id: "Mme.Hucheloup"
        }],
        edges: [{
          source: "Napoleon",
          target: "Myriel",
          value: 1
        },
        {
          source: "Mlle.Baptistine",
          target: "Myriel",
          value: 8
        },
        {
          source: "Mme.Magloire",
          target: "Myriel",
          value: 10
        },
        {
          source: "Mme.Magloire",
          target: "Mlle.Baptistine",
          value: 6
        },
        {
          source: "CountessdeLo",
          target: "Myriel",
          value: 1
        },
        {
          source: "Geborand",
          target: "Myriel",
          value: 1
        },
        {
          source: "Champtercier",
          target: "Myriel",
          value: 1
        },
        {
          source: "Cravatte",
          target: "Myriel",
          value: 1
        },
        {
          source: "Count",
          target: "Myriel",
          value: 2
        },
        {
          source: "OldMan",
          target: "Myriel",
          value: 1
        },
        {
          source: "Valjean",
          target: "Labarre",
          value: 1
        },
        {
          source: "Valjean",
          target: "Mme.Magloire",
          value: 3
        },
        {
          source: "Valjean",
          target: "Mlle.Baptistine",
          value: 3
        },
        {
          source: "Valjean",
          target: "Myriel",
          value: 5
        },
        {
          source: "Marguerite",
          target: "Valjean",
          value: 1
        },
        {
          source: "Mme.deR",
          target: "Valjean",
          value: 1
        },
        {
          source: "Isabeau",
          target: "Valjean",
          value: 1
        },
        {
          source: "Gervais",
          target: "Valjean",
          value: 1
        },
        {
          source: "Listolier",
          target: "Tholomyes",
          value: 4
        },
        {
          source: "Fameuil",
          target: "Tholomyes",
          value: 4
        },
        {
          source: "Fameuil",
          target: "Listolier",
          value: 4
        },
        {
          source: "Blacheville",
          target: "Tholomyes",
          value: 4
        },
        {
          source: "Blacheville",
          target: "Listolier",
          value: 4
        },
        {
          source: "Blacheville",
          target: "Fameuil",
          value: 4
        },
        {
          source: "Favourite",
          target: "Tholomyes",
          value: 3
        },
        {
          source: "Favourite",
          target: "Listolier",
          value: 3
        },
        {
          source: "Favourite",
          target: "Fameuil",
          value: 3
        },
        {
          source: "Favourite",
          target: "Blacheville",
          value: 4
        },
        {
          source: "Dahlia",
          target: "Tholomyes",
          value: 3
        },
        {
          source: "Dahlia",
          target: "Listolier",
          value: 3
        },
        {
          source: "Dahlia",
          target: "Fameuil",
          value: 3
        },
        {
          source: "Dahlia",
          target: "Blacheville",
          value: 3
        },
        {
          source: "Dahlia",
          target: "Favourite",
          value: 5
        },
        {
          source: "Zephine",
          target: "Tholomyes",
          value: 3
        },
        {
          source: "Zephine",
          target: "Listolier",
          value: 3
        },
        {
          source: "Zephine",
          target: "Fameuil",
          value: 3
        },
        {
          source: "Zephine",
          target: "Blacheville",
          value: 3
        },
        {
          source: "Zephine",
          target: "Favourite",
          value: 4
        },
        {
          source: "Zephine",
          target: "Dahlia",
          value: 4
        },
        {
          source: "Fantine",
          target: "Tholomyes",
          value: 3
        },
        {
          source: "Fantine",
          target: "Listolier",
          value: 3
        },
        {
          source: "Fantine",
          target: "Fameuil",
          value: 3
        },
        {
          source: "Fantine",
          target: "Blacheville",
          value: 3
        },
        {
          source: "Fantine",
          target: "Favourite",
          value: 4
        },
        {
          source: "Fantine",
          target: "Dahlia",
          value: 4
        },
        {
          source: "Fantine",
          target: "Zephine",
          value: 4
        },
        {
          source: "Fantine",
          target: "Marguerite",
          value: 2
        },
        {
          source: "Fantine",
          target: "Valjean",
          value: 9
        },
        {
          source: "Mme.Thenardier",
          target: "Fantine",
          value: 2
        },
        {
          source: "Mme.Thenardier",
          target: "Valjean",
          value: 7
        },
        {
          source: "Thenardier",
          target: "Mme.Thenardier",
          value: 13
        },
        {
          source: "Thenardier",
          target: "Fantine",
          value: 1
        },
        {
          source: "Thenardier",
          target: "Valjean",
          value: 12
        },
        {
          source: "Cosette",
          target: "Mme.Thenardier",
          value: 4
        },
        {
          source: "Cosette",
          target: "Valjean",
          value: 31
        },
        {
          source: "Cosette",
          target: "Tholomyes",
          value: 1
        },
        {
          source: "Cosette",
          target: "Thenardier",
          value: 1
        },
        {
          source: "Javert",
          target: "Valjean",
          value: 17
        },
        {
          source: "Javert",
          target: "Fantine",
          value: 5
        },
        {
          source: "Javert",
          target: "Thenardier",
          value: 5
        },
        {
          source: "Javert",
          target: "Mme.Thenardier",
          value: 1
        },
        {
          source: "Javert",
          target: "Cosette",
          value: 1
        },
        {
          source: "Fauchelevent",
          target: "Valjean",
          value: 8
        },
        {
          source: "Fauchelevent",
          target: "Javert",
          value: 1
        },
        {
          source: "Bamatabois",
          target: "Fantine",
          value: 1
        },
        {
          source: "Bamatabois",
          target: "Javert",
          value: 1
        },
        {
          source: "Bamatabois",
          target: "Valjean",
          value: 2
        },
        {
          source: "Perpetue",
          target: "Fantine",
          value: 1
        },
        {
          source: "Simplice",
          target: "Perpetue",
          value: 2
        },
        {
          source: "Simplice",
          target: "Valjean",
          value: 3
        },
        {
          source: "Simplice",
          target: "Fantine",
          value: 2
        },
        {
          source: "Simplice",
          target: "Javert",
          value: 1
        },
        {
          source: "Scaufflaire",
          target: "Valjean",
          value: 1
        },
        {
          source: "Woman1",
          target: "Valjean",
          value: 2
        },
        {
          source: "Woman1",
          target: "Javert",
          value: 1
        },
        {
          source: "Judge",
          target: "Valjean",
          value: 3
        },
        {
          source: "Judge",
          target: "Bamatabois",
          value: 2
        },
        {
          source: "Champmathieu",
          target: "Valjean",
          value: 3
        },
        {
          source: "Champmathieu",
          target: "Judge",
          value: 3
        },
        {
          source: "Champmathieu",
          target: "Bamatabois",
          value: 2
        },
        {
          source: "Brevet",
          target: "Judge",
          value: 2
        },
        {
          source: "Brevet",
          target: "Champmathieu",
          value: 2
        },
        {
          source: "Brevet",
          target: "Valjean",
          value: 2
        },
        {
          source: "Brevet",
          target: "Bamatabois",
          value: 1
        },
        {
          source: "Chenildieu",
          target: "Judge",
          value: 2
        },
        {
          source: "Chenildieu",
          target: "Champmathieu",
          value: 2
        },
        {
          source: "Chenildieu",
          target: "Brevet",
          value: 2
        },
        {
          source: "Chenildieu",
          target: "Valjean",
          value: 2
        },
        {
          source: "Chenildieu",
          target: "Bamatabois",
          value: 1
        },
        {
          source: "Cochepaille",
          target: "Judge",
          value: 2
        },
        {
          source: "Cochepaille",
          target: "Champmathieu",
          value: 2
        },
        {
          source: "Cochepaille",
          target: "Brevet",
          value: 2
        },
        {
          source: "Cochepaille",
          target: "Chenildieu",
          value: 2
        },
        {
          source: "Cochepaille",
          target: "Valjean",
          value: 2
        },
        {
          source: "Cochepaille",
          target: "Bamatabois",
          value: 1
        },
        {
          source: "Pontmercy",
          target: "Thenardier",
          value: 1
        },
        {
          source: "Boulatruelle",
          target: "Thenardier",
          value: 1
        },
        {
          source: "Eponine",
          target: "Mme.Thenardier",
          value: 2
        },
        {
          source: "Eponine",
          target: "Thenardier",
          value: 3
        },
        {
          source: "Anzelma",
          target: "Eponine",
          value: 2
        },
        {
          source: "Anzelma",
          target: "Thenardier",
          value: 2
        },
        {
          source: "Anzelma",
          target: "Mme.Thenardier",
          value: 1
        },
        {
          source: "Woman2",
          target: "Valjean",
          value: 3
        },
        {
          source: "Woman2",
          target: "Cosette",
          value: 1
        },
        {
          source: "Woman2",
          target: "Javert",
          value: 1
        },
        {
          source: "MotherInnocent",
          target: "Fauchelevent",
          value: 3
        },
        {
          source: "MotherInnocent",
          target: "Valjean",
          value: 1
        },
        {
          source: "Gribier",
          target: "Fauchelevent",
          value: 2
        },
        {
          source: "Mme.Burgon",
          target: "Jondrette",
          value: 1
        },
        {
          source: "Gavroche",
          target: "Mme.Burgon",
          value: 2
        },
        {
          source: "Gavroche",
          target: "Thenardier",
          value: 1
        },
        {
          source: "Gavroche",
          target: "Javert",
          value: 1
        },
        {
          source: "Gavroche",
          target: "Valjean",
          value: 1
        },
        {
          source: "Gillenormand",
          target: "Cosette",
          value: 3
        },
        {
          source: "Gillenormand",
          target: "Valjean",
          value: 2
        },
        {
          source: "Magnon",
          target: "Gillenormand",
          value: 1
        },
        {
          source: "Magnon",
          target: "Mme.Thenardier",
          value: 1
        },
        {
          source: "Mlle.Gillenormand",
          target: "Gillenormand",
          value: 9
        },
        {
          source: "Mlle.Gillenormand",
          target: "Cosette",
          value: 2
        },
        {
          source: "Mlle.Gillenormand",
          target: "Valjean",
          value: 2
        },
        {
          source: "Mme.Pontmercy",
          target: "Mlle.Gillenormand",
          value: 1
        },
        {
          source: "Mme.Pontmercy",
          target: "Pontmercy",
          value: 1
        },
        {
          source: "Mlle.Vaubois",
          target: "Mlle.Gillenormand",
          value: 1
        },
        {
          source: "Lt.Gillenormand",
          target: "Mlle.Gillenormand",
          value: 2
        },
        {
          source: "Lt.Gillenormand",
          target: "Gillenormand",
          value: 1
        },
        {
          source: "Lt.Gillenormand",
          target: "Cosette",
          value: 1
        },
        {
          source: "Marius",
          target: "Mlle.Gillenormand",
          value: 6
        },
        {
          source: "Marius",
          target: "Gillenormand",
          value: 12
        },
        {
          source: "Marius",
          target: "Pontmercy",
          value: 1
        },
        {
          source: "Marius",
          target: "Lt.Gillenormand",
          value: 1
        },
        {
          source: "Marius",
          target: "Cosette",
          value: 21
        },
        {
          source: "Marius",
          target: "Valjean",
          value: 19
        },
        {
          source: "Marius",
          target: "Tholomyes",
          value: 1
        },
        {
          source: "Marius",
          target: "Thenardier",
          value: 2
        },
        {
          source: "Marius",
          target: "Eponine",
          value: 5
        },
        {
          source: "Marius",
          target: "Gavroche",
          value: 4
        },
        {
          source: "BaronessT",
          target: "Gillenormand",
          value: 1
        },
        {
          source: "BaronessT",
          target: "Marius",
          value: 1
        },
        {
          source: "Mabeuf",
          target: "Marius",
          value: 1
        },
        {
          source: "Mabeuf",
          target: "Eponine",
          value: 1
        },
        {
          source: "Mabeuf",
          target: "Gavroche",
          value: 1
        },
        {
          source: "Enjolras",
          target: "Marius",
          value: 7
        },
        {
          source: "Enjolras",
          target: "Gavroche",
          value: 7
        },
        {
          source: "Enjolras",
          target: "Javert",
          value: 6
        },
        {
          source: "Enjolras",
          target: "Mabeuf",
          value: 1
        },
        {
          source: "Enjolras",
          target: "Valjean",
          value: 4
        },
        {
          source: "Combeferre",
          target: "Enjolras",
          value: 15
        },
        {
          source: "Combeferre",
          target: "Marius",
          value: 5
        },
        {
          source: "Combeferre",
          target: "Gavroche",
          value: 6
        },
        {
          source: "Combeferre",
          target: "Mabeuf",
          value: 2
        },
        {
          source: "Prouvaire",
          target: "Gavroche",
          value: 1
        },
        {
          source: "Prouvaire",
          target: "Enjolras",
          value: 4
        },
        {
          source: "Prouvaire",
          target: "Combeferre",
          value: 2
        },
        {
          source: "Feuilly",
          target: "Gavroche",
          value: 2
        },
        {
          source: "Feuilly",
          target: "Enjolras",
          value: 6
        },
        {
          source: "Feuilly",
          target: "Prouvaire",
          value: 2
        },
        {
          source: "Feuilly",
          target: "Combeferre",
          value: 5
        },
        {
          source: "Feuilly",
          target: "Mabeuf",
          value: 1
        },
        {
          source: "Feuilly",
          target: "Marius",
          value: 1
        },
        {
          source: "Courfeyrac",
          target: "Marius",
          value: 9
        },
        {
          source: "Courfeyrac",
          target: "Enjolras",
          value: 17
        },
        {
          source: "Courfeyrac",
          target: "Combeferre",
          value: 13
        },
        {
          source: "Courfeyrac",
          target: "Gavroche",
          value: 7
        },
        {
          source: "Courfeyrac",
          target: "Mabeuf",
          value: 2
        },
        {
          source: "Courfeyrac",
          target: "Eponine",
          value: 1
        },
        {
          source: "Courfeyrac",
          target: "Feuilly",
          value: 6
        },
        {
          source: "Courfeyrac",
          target: "Prouvaire",
          value: 3
        },
        {
          source: "Bahorel",
          target: "Combeferre",
          value: 5
        },
        {
          source: "Bahorel",
          target: "Gavroche",
          value: 5
        },
        {
          source: "Bahorel",
          target: "Courfeyrac",
          value: 6
        },
        {
          source: "Bahorel",
          target: "Mabeuf",
          value: 2
        },
        {
          source: "Bahorel",
          target: "Enjolras",
          value: 4
        },
        {
          source: "Bahorel",
          target: "Feuilly",
          value: 3
        },
        {
          source: "Bahorel",
          target: "Prouvaire",
          value: 2
        },
        {
          source: "Bahorel",
          target: "Marius",
          value: 1
        },
        {
          source: "Bossuet",
          target: "Marius",
          value: 5
        },
        {
          source: "Bossuet",
          target: "Courfeyrac",
          value: 12
        },
        {
          source: "Bossuet",
          target: "Gavroche",
          value: 5
        },
        {
          source: "Bossuet",
          target: "Bahorel",
          value: 4
        },
        {
          source: "Bossuet",
          target: "Enjolras",
          value: 10
        },
        {
          source: "Bossuet",
          target: "Feuilly",
          value: 6
        },
        {
          source: "Bossuet",
          target: "Prouvaire",
          value: 2
        },
        {
          source: "Bossuet",
          target: "Combeferre",
          value: 9
        },
        {
          source: "Bossuet",
          target: "Mabeuf",
          value: 1
        },
        {
          source: "Bossuet",
          target: "Valjean",
          value: 1
        },
        {
          source: "Joly",
          target: "Bahorel",
          value: 5
        },
        {
          source: "Joly",
          target: "Bossuet",
          value: 7
        },
        {
          source: "Joly",
          target: "Gavroche",
          value: 3
        },
        {
          source: "Joly",
          target: "Courfeyrac",
          value: 5
        },
        {
          source: "Joly",
          target: "Enjolras",
          value: 5
        },
        {
          source: "Joly",
          target: "Feuilly",
          value: 5
        },
        {
          source: "Joly",
          target: "Prouvaire",
          value: 2
        },
        {
          source: "Joly",
          target: "Combeferre",
          value: 5
        },
        {
          source: "Joly",
          target: "Mabeuf",
          value: 1
        },
        {
          source: "Joly",
          target: "Marius",
          value: 2
        },
        {
          source: "Grantaire",
          target: "Bossuet",
          value: 3
        },
        {
          source: "Grantaire",
          target: "Enjolras",
          value: 3
        },
        {
          source: "Grantaire",
          target: "Combeferre",
          value: 1
        },
        {
          source: "Grantaire",
          target: "Courfeyrac",
          value: 2
        },
        {
          source: "Grantaire",
          target: "Joly",
          value: 2
        },
        {
          source: "Grantaire",
          target: "Gavroche",
          value: 1
        },
        {
          source: "Grantaire",
          target: "Bahorel",
          value: 1
        },
        {
          source: "Grantaire",
          target: "Feuilly",
          value: 1
        },
        {
          source: "Grantaire",
          target: "Prouvaire",
          value: 1
        },
        {
          source: "MotherPlutarch",
          target: "Mabeuf",
          value: 3
        },
        {
          source: "Gueulemer",
          target: "Thenardier",
          value: 5
        },
        {
          source: "Gueulemer",
          target: "Valjean",
          value: 1
        },
        {
          source: "Gueulemer",
          target: "Mme.Thenardier",
          value: 1
        },
        {
          source: "Gueulemer",
          target: "Javert",
          value: 1
        },
        {
          source: "Gueulemer",
          target: "Gavroche",
          value: 1
        },
        {
          source: "Gueulemer",
          target: "Eponine",
          value: 1
        },
        {
          source: "Babet",
          target: "Thenardier",
          value: 6
        },
        {
          source: "Babet",
          target: "Gueulemer",
          value: 6
        },
        {
          source: "Babet",
          target: "Valjean",
          value: 1
        },
        {
          source: "Babet",
          target: "Mme.Thenardier",
          value: 1
        },
        {
          source: "Babet",
          target: "Javert",
          value: 2
        },
        {
          source: "Babet",
          target: "Gavroche",
          value: 1
        },
        {
          source: "Babet",
          target: "Eponine",
          value: 1
        },
        {
          source: "Claquesous",
          target: "Thenardier",
          value: 4
        },
        {
          source: "Claquesous",
          target: "Babet",
          value: 4
        },
        {
          source: "Claquesous",
          target: "Gueulemer",
          value: 4
        },
        {
          source: "Claquesous",
          target: "Valjean",
          value: 1
        },
        {
          source: "Claquesous",
          target: "Mme.Thenardier",
          value: 1
        },
        {
          source: "Claquesous",
          target: "Javert",
          value: 1
        },
        {
          source: "Claquesous",
          target: "Eponine",
          value: 1
        },
        {
          source: "Claquesous",
          target: "Enjolras",
          value: 1
        },
        {
          source: "Montparnasse",
          target: "Javert",
          value: 1
        },
        {
          source: "Montparnasse",
          target: "Babet",
          value: 2
        },
        {
          source: "Montparnasse",
          target: "Gueulemer",
          value: 2
        },
        {
          source: "Montparnasse",
          target: "Claquesous",
          value: 2
        },
        {
          source: "Montparnasse",
          target: "Valjean",
          value: 1
        },
        {
          source: "Montparnasse",
          target: "Gavroche",
          value: 1
        },
        {
          source: "Montparnasse",
          target: "Eponine",
          value: 1
        },
        {
          source: "Montparnasse",
          target: "Thenardier",
          value: 1
        },
        {
          source: "Toussaint",
          target: "Cosette",
          value: 2
        },
        {
          source: "Toussaint",
          target: "Javert",
          value: 1
        },
        {
          source: "Toussaint",
          target: "Valjean",
          value: 1
        },
        {
          source: "Child1",
          target: "Gavroche",
          value: 2
        },
        {
          source: "Child2",
          target: "Gavroche",
          value: 2
        },
        {
          source: "Child2",
          target: "Child1",
          value: 3
        },
        {
          source: "Brujon",
          target: "Babet",
          value: 3
        },
        {
          source: "Brujon",
          target: "Gueulemer",
          value: 3
        },
        {
          source: "Brujon",
          target: "Thenardier",
          value: 3
        },
        {
          source: "Brujon",
          target: "Gavroche",
          value: 1
        },
        {
          source: "Brujon",
          target: "Eponine",
          value: 1
        },
        {
          source: "Brujon",
          target: "Claquesous",
          value: 1
        },
        {
          source: "Brujon",
          target: "Montparnasse",
          value: 1
        },
        {
          source: "Mme.Hucheloup",
          target: "Bossuet",
          value: 1
        },
        {
          source: "Mme.Hucheloup",
          target: "Joly",
          value: 1
        },
        {
          source: "Mme.Hucheloup",
          target: "Grantaire",
          value: 1
        },
        {
          source: "Mme.Hucheloup",
          target: "Bahorel",
          value: 1
        },
        {
          source: "Mme.Hucheloup",
          target: "Courfeyrac",
          value: 1
        },
        {
          source: "Mme.Hucheloup",
          target: "Gavroche",
          value: 1
        },
        {
          source: "Mme.Hucheloup",
          target: "Enjolras",
          value: 1
        }]
      };

      const graph = new G6.Graph({
        container: 'mountNode',
        width: window.innerWidth,
        height: window.innerHeight,
        autoPaint: false,
        defaultNode: {
          size: [10, 10],
          color: 'steelblue',
          style: {
            lineWidth: 2,
            fill: 'steelblue'
          }
        },
        defaultEdge: {
          size: 1,
          style: {
            stroke: '#e2e2e2',
            lineAppendWidth: 2
          },
        },
        nodeStateStyles: {
          highlight: {
            opacity: 1
          },
          dark: {
            opacity: 0.2
          }
        },
        edgeStateStyles: {
          highlight: {
            stroke: '#999'
          }
        }
      });

      function clearAllStats() {
        graph.setAutoPaint(false);
        graph.getNodes().forEach(function(node) {
          graph.clearItemStates(node);
        });

        graph.getEdges().forEach(function(edge) {
          graph.clearItemStates(edge);
        });
        graph.paint();
        graph.setAutoPaint(true);
      }
      graph.on('node:mouseenter',
      function(e) {
        var item = e.item;

        graph.setAutoPaint(false);

        graph.getNodes().forEach(function(node) {
          graph.clearItemStates(node);
          graph.setItemState(node, 'dark', true);
        });

        graph.setItemState(item, 'dark', false);
        graph.setItemState(item, 'highlight', true);
        graph.getEdges().forEach(function(edge) {
          if (edge.getSource() === item) {
            graph.setItemState(edge.getTarget(), 'dark', false);
            graph.setItemState(edge.getTarget(), 'highlight', true);
            graph.setItemState(edge, 'highlight', true);
            edge.toFront();
          } else if (edge.getTarget() === item) {
            graph.setItemState(edge.getSource(), 'dark', false);
            graph.setItemState(edge.getSource(), 'highlight', true);
            graph.setItemState(edge, 'highlight', true);
            edge.toFront();
          } else {
            graph.setItemState(edge, 'highlight', false);
          }
        });

        graph.paint();
        graph.setAutoPaint(true);
      });
      graph.on('node:mouseleave', clearAllStats);
      graph.on('canvas:click', clearAllStats);

      graph.data({
        nodes: data.nodes,
        edges: data.edges.map(function(edge, i) {
          edge.id = 'edge' + i;
          return Object.assign({},
          edge);
        })
      });
      var simulation = d3.forceSimulation().force("link", d3.forceLink().id(function(d) {
        return d.id;
      }).strength(0.5)).force("charge", d3.forceManyBody()).force("center", d3.forceCenter(window.innerWidth / 2, window.innerHeight / 2));
      simulation.nodes(data.nodes).on("tick", ticked);
      simulation.force("link").links(data.edges);

      graph.render();

      function ticked() {
        graph.refreshPositions();
        graph.paint();
      }
    </script>
  </body>
</html>